<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <!-- 渲染，只不过通过display属性控制显示或隐藏 -->
        <p v-show="!flag">登录，注册</p>
        <p v-show="flag">欢迎XXX</p>
        ------
        <!-- 渲染或不渲染 -->
        <p v-if="flag">欢迎XXX</p>
        <p v-else>登录，注册</p>
        ------
        <!-- if,else-if,else一定要配套使用 -->
        <p v-if="num===0">hello</p>
        <p v-else-if="num===1">world</p>
        <p v-else>hahah</p>
    </div>
</body>
<script src="./libs/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                flag:true,
                num:2
            }
        }
    })
</script>
</html>